<template>
	<view class="block">
		<view class="item" style="">
			<view class="item_label">
				修改头像:
			</view>
			<view style="avatar_cen">
				<button class="butava" type="default" open-type="chooseAvatar" @chooseavatar="chooseavatar">
					<u-avatar :src="userInfo.avatarUrl" shape="circle"></u-avatar></button>
			</view>
		</view>
		<view class="item">
			<view class="item_label">
				昵称:
			</view>
			<view class="item_inp">
				<u--input type="nickname" v-model="userInfo.nickName" placeholder="请输入昵称" />
			</view>
		</view>
		<view class="item desc">
			<view class="item_label">
				手机号:
			</view>
			<view class="item_inp">
				<u--input v-model="userInfo.phone" placeholder="请输入手机号" />
			</view>
		</view>
		<view class="bot_but" style="">
			<view class="but_item" style="" @click="submit">
				修改
			</view>
		</view>
		<view class="loginout" @click="removeuser">
			<span class="iconfont icon-exit-logon"></span>退出登录
		</view>
	</view>
</template>

<script scoped>
	export default {
		props: {},
		components: {},
		data() {
			return {
				userInfo: {
					phone: '',
					avatarUrl: '',
					nickName: '',

				},
				temporaryUrl: '' //记录初始的头像

			}
		},
		mixins: [],
		computed: {},
		watch: {

		},
		created() {
			this.detailinfo()
		},
		mounted() {

		},
		methods: {
			detailinfo() {
				this.$request(`/mine/memberInfo`, 'get').then(
					res => {
						this.userInfo.avatarUrl = res.data.data.avatarUrl
						this.userInfo.nickName = res.data.data.nickName
						this.userInfo.phone = res.data.data.phone
						this.temporaryUrl = res.data.data.avatarUrl
					})
			},
			//提交修改
			submit() {
				const that = this
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				if (!this.userInfo.nickName) {
					uni.showToast({
						icon: 'error',
						title: '昵称不能为空',
					})
					return
				}
				if (!this.userInfo.phone) {
					uni.showToast({
						icon: 'error',
						title: '手机号不能为空',
					})
					return
				}
				// 手机号格式验证
				const phoneRegEx = /^1[3-9]\d{9}$/;
				if (!phoneRegEx.test(this.userInfo.phone)) {
					uni.showToast({
						icon: 'error',
						title: '手机号格式错误',
					});
					return;
				}
				//只能上传本地图片不能上传https的已经上传了的图片
				if (this.temporaryUrl == this.userInfo.avatarUrl) {
					this.request()
				} else {
					this.$uploadimg(this.userInfo.avatarUrl,'/upload/image')
						.then((url) => {
							that.userInfo.avatarUrl = url
							that.request()
						})
						.catch((err) => {
							console.error(err);
						});
				}


			},
			request() {
				this.$request(`/mine/member/edit`, 'post', this.userInfo).then(
					res => {
						uni.hideLoading();
						if (!res.data.data) {
							uni.showModal({
								title: '修改失败',
								content: res.data.message,
								showCancel: false,
								success: function(res) {
									return
								}
							});
							return
						}
						const that = this
						uni.getStorage({
							key: 'digital_aI_key',
							success: function(res) {
								// console.log(res);
								const user = res.data
								user.nickName = that.userInfo.nickName
								user.avatarUrl = that.userInfo.avatarUrl
								user.phone = that.userInfo.phone
								uni.setStorage({
									key: 'digital_aI_key',
									data: user,
									success: function() {
										const eventChannel = that.getOpenerEventChannel()
										eventChannel.emit('messageData', {
											data: true
										})
									},
								});
							}
						});
						uni.navigateBack({
							delta: 1
						});
						uni.showToast({
							title: '修改成功',
						})
					})
			},
			// 图片选择回调临时地址
			chooseavatar(e) {
				console.log(e);
				this.userInfo.avatarUrl = e.detail.avatarUrl
			},

			//删除本地存储
			removeuser() {
				const that = this
				uni.removeStorage({
					key: 'digital_aI_key',
					success: function(res) {
						const eventChannel = that.getOpenerEventChannel()
						eventChannel.emit('messageData', {
							data: true
						})
						uni.navigateBack({
							delta: 1
						});
					}
				});

			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-radio {
		margin-right: 20px;
	}

	.agreement {
		font-size: 13px;
		color: #fff;
		margin: 10px 0;
	}

	.bot_agreement {
		margin-left: 10px;
		display: flex;
		align-items: center;
	}

	.loginout {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		color: #ff2e4d;
		margin-top: 10px;
		text-align: center;
		font-size: 13px;

		.iconfont {
			font-size: 30rpx;
			margin-right: 3px;
		}
	}

	.block {
		padding: 20px;
		height: 100vh;
		// background-color: #191919;

		button {
			border: 0px solid #000;
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10px;
			border: none;
			margin: 5px 0;
			height: 50px;
			color: #000;
			// background-color: #191919;
			border-bottom: 1px solid #b0b0b0;

			.item_label {
				font-size: 14px;
				width: 25%;
			}

			.item_inp {
				display: flex;
				align-items: center;
				width: 75%;
			}

			.butava {
				height: 40px;
				width: 40px;
				padding: 0;
				border-radius: 20px;
			}

			.avatar_cen {
				display: flex;
				align-items: center;
			}

		}

		.bot_but {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.but_item {
			text-align: center;
			height: 40px;
			line-height: 40px;
			color: #fff;
			width: 100%;
			margin-top: 10px;
			background-color: #f97316;
			box-shadow: 3px 5px 5px -5px rgba(0, 0, 0, 0.75);
		}

		::v-deep .u-textarea,
		::v-deep .u-textarea__field,
		::v-deep .u-input,
		::v-deep .u-input__content__field-wrapper__field {
			color: #191919 !important;
			// background-color: #191919 !important;
		}

		.desc {
			height: auto;
			min-height: 50px;
		}

	}
</style>